<template>
  <el-form :class="setting.ref" ref="autoForm" :model="autoForm" :rules="autoRules" :label-width="setting.width" :inline="setting.inline" :label-position="setting.align" :id="setting.inline">
    <el-form-item v-for="(item, key) in form" :key="key" :label="item.label" :prop="convert2prop(item.label)">
      <!--input-->
      <template v-if="item.type === 'input'">
          <el-input v-model="autoForm[item.module || convert2prop(item.label)]" :placeholder="'请输入'+item.label" @input="handleRefresh" :style="'width:'+item.width+';'"/>
      </template>
      <!--select-multiple-->
      <template v-if="item.type === 'select-multiple'">
        <el-select filterable
                   multiple
                   v-model="autoForm[item.module || convert2prop(item.label)]"
                   :placeholder="'请选择'+item.label"
                   @change="handleRefresh"
                   :style="'width:'+item.width+';'">
          <el-option v-for="(item_, key_) in item.options"
                     :key="key+'_'+key_"
                     :label="item_.label"
                     :value="item_.value"></el-option>
        </el-select>
      </template>
            <!--select-->
      <template v-if="item.type === 'select'">
        <el-select filterable v-model="autoForm[item.module || convert2prop(item.label)]" :placeholder="'请选择'+item.label" @change="handleRefresh" :style="'width:'+item.width+';'">
          <el-option v-for="(item_, key_) in item.options"
                     :key="key+'_'+key_"
                     :label="item_.label"
                     :value="item_.value"></el-option>
        </el-select>
      </template>
      <template v-if="item.type === 'type' && item.label === '类型'">
        <el-select filterable v-model="autoForm[item.module || convert2prop(item.label)]"
                   :placeholder="'请选择'+item.label" @change="handleSelectTypeChange" :style="'width:'+item.width+';'">
          <el-option v-for="(item_, key_) in item.options"
                     :key="key+'_'+key_"
                     :label="item_.label"
                     :value="item_.value" v-show="item_.value"></el-option>
        </el-select>
        <el-form-item v-for="(item_c, key_c) in item.group" :key="key_c" :label="item_c.label" style="height:45px;"
                      :prop="convert2prop(item_c.label) ">
          <template v-if="item_c.kind === type">
            <el-select filterable v-model="autoForm[item_c.module || convert2prop(item_c.label)]"
                       :placeholder="'请选择'+item_c.label" @change="handleRefresh"
                       :style="'width:'+item_c.width+';'">
              <el-option v-for="(item_, key_) in item_c.options"
                         :key="key_c+'_'+key_"
                         :label="item_.label"
                         :value="item_.value" v-show="item_.value"></el-option>
            </el-select>
          </template>
        </el-form-item>
      </template>
      <!--date-->
      <template v-if="item.type === 'date'">
        <el-date-picker type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'请选择'+item.label" v-model="autoForm[convert2prop(item.label)]" @change="handleRefresh" :style="'width:'+item.width+';'"></el-date-picker>
      </template>
      <!--datetimerange-->
      <template v-if="item.type === 'date_range'">
        <el-date-picker type="monthrange" v-model="autoForm[convert2prop(item.label)]" range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM"
                        align="left"
                        size="large"
                        :picker-options="item.option"
                        :style="'width:'+item.width+';'">
        </el-date-picker>
      </template>
      <template v-if="item.type === 'date_day_range'">
        <el-date-picker type="daterange" v-model="autoForm[convert2prop(item.label)]" range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        align="right"
                        unlink-panels
                        size="large"
                        :picker-options="item.option"
                        :style="'width:'+item.width+';'">
        </el-date-picker>
      </template>
      <template v-if="item.type === 'datetimerange'">
        <el-date-picker type="datetimerange" v-model="autoForm[convert2prop(item.label)]" range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        :style="'width:'+item.width+';'"></el-date-picker>
      </template>
      <!--radio-->
      <template v-if="item.type === 'radio'">
        <el-radio-group v-model="autoForm[item.module || convert2prop(item.label)]" @change="handleRefresh" :style="'width:'+item.width+';'">
          <el-radio v-for="(item_, key_) in item.options" :key="key_" :label="item_.label" :value="item_.value"></el-radio>
        </el-radio-group>
      </template>
      <!--textarea-->
      <template v-if="item.type === 'textarea'">
        <el-input type="textarea" v-model="autoForm[item.module || convert2prop(item.label)]" :readonly="item.readonly"
                  :style="'width:'+item.width+';'" autosize/>
      </template>
      <!--upload-->
      <template v-if="item.type === 'upload-file'">
        <el-upload
            class="upload-demo"
            :action="item.action"
            :file-list="miniFileList"
            :on-exceed="handleExceed"
            :on-change="handleUploadChangeFile"
            :limit="item.limit">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
        </el-upload>
      </template>
      <template v-if="item.type === 'upload-drag'">
        <el-upload
            class="upload-demo"
            ref="upload"
            drag
            :file-list="fileList"
            :on-change="handleUploadChange"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :action="item.action"
            :on-exceed="handleExceed"
            :on-success="handleUploadSuccess"
            :limit="item.limit"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">{{ item.tip }}</div>
        </el-upload>
      </template>
      <template v-if="item.type === 'download'">
        <el-card class="box-card">
          <div v-for="o in autoForm[item.module || convert2prop(item.label)]" :key="o" class="text item">
            {{ o.type }} / {{ o.name }}
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleFileDownload(item.event, o)">下载</el-button>
          </div>
        </el-card>
      </template>
    </el-form-item>
    <!--BUTTON--GROUP-->
    <el-form-item v-if="button">
      <el-button v-for="(item, key) in button" :key="'btn-'+key" :class="item.float" :icon="item.icon" :type="item.type" @click="handleButton(item.event, 'autoForm')">{{ item.name }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import chineseToPinYin from '@/lib/pinyin'
import mixins from './mixins'
import axios from 'axios'
axios.defaults.baseURL = '/api'


// 定义属性字典值,用以label转换为键
const labelDict = {
  name: '名称',
  robot: '臂系统',
  arm: '机械臂',
  hand: '主手',
  console: '控制台',
  time: '标定时间',
  start_time: '开始时间',
  end_time: '结束时间',
  type: '类型',
  status: '状态',
  worker: '操作者',
  remarks: '备注',
  result: '标定结果',
  params: '标定参数',
  dataset: '标定数据',
  source_data: '原始数据',
  source_data_files: '文件列表',
  upload_result: '结果上传',
  upload_c_track: '光学数据',
  upload_encoder: '编码器数据',

  customer_hospital: '客户单位',
  clinical_department: '临床科室',
  surgical_type: '手术类型',
  doctor: '主刀医生',
  product_model: '产品型号',
  equipment_number: '设备编号',
  system_version: '软件版本',
  nature: '项目性质',
  occurred_time: '手术时间',
  date_range: '时间范围',
  surgical_files: '手术上传',
};

function convert2prop(item) {
  for (let key in labelDict) {
    if (labelDict[key] === item) {
      return key;
    }
  }
  return 'UNKNOWN';
}
export default {
  name: 'index',
  mixins: [mixins],
  computed: {
  },
  title: '',
  props: {
    setting: {
      type: Object,
      default: () => ({
        ref: 'form',
        width: '120px',
        align: 'left'
      })
    },
    button: {
      type: Array,
      default: () => [
        { name: '查询', event: 'search', type: 'primary', icon: 'el-icon-search' },
        { name: '重置', event: 'reset', type: 'success', icon: 'el-icon-refresh-left' }
      ]
    },
    form: {
      type: Array,
      default: () => [
        { label: '类型', type: 'select' },
        { label: '分数', type: 'input' },
        { label: '时间', type: 'date' }
      ]
    }
  },
  data () {
    return {
      autoRules: {},
      type: 'ROBOT',
      miniFileList: [],
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }, {
        //   name: 'food2.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
        ]
    }
  },
  created () {
    this.type = this.autoForms.type
    this.form.forEach(item => {
      // 表单默认值
      // this.autoForm[chineseToPinYin(item.label)] = item.value || null
      // 表单验证
      this.autoRules[convert2prop(item.label)] = verify(item)
    })
    function verify (item) {
      let rules = []
      if (item.required && item.type === 'input') {
        rules = [{ required: true, message: `请输入${item.label}`, trigger: ['blur', 'change'] }]
      } else if (item.required && item.type === 'select') {
        rules = [{ required: true, message: `请选择${item.label}`, trigger: ['blur', 'change'] }]
      } else if (item.required && item.type === 'textarea') {
        rules = [{ required: true, message: `请输入${item.label}`, trigger: ['blur', 'change'] }]
      } else if (item.required && item.type === 'date') {
        rules = [{ required: true, message: `请选择${item.label}`, trigger: ['blur', 'change']}]
      } else if (item.required && item.type === 'radio') {
        rules = [{ required: true, message: `请选择${item.label}`, trigger: ['blur', 'change'] }]
      }
      return rules
    }
  },
  methods: {
    // 文字转拼音
    chineseToPinYin,
    convert2prop,
    handleUploadChangeFile(file, fileList) {
      this.miniFileList = fileList;
    },
    handleUploadChange(file, fileList) {
      this.fileList = fileList;
    },
    handleFileDownload(event, o) {
      this.$emit(event, o)
    },
    handleButton (event, autoForm) {
      if (event === 'reset' || event === 'cancel') {
        this.autoForms = {}
        this.$emit(event, this.autoForms, this.setting.ref)
      } else {
        this.$refs[autoForm].validate((valid) => {
          if (valid) {
            this.autoForms['file_list'] = this.fileList
            this.autoForms['encoder_list'] = this.miniFileList
            this.$emit(event, this.autoForms, this.setting.ref)
          } else {
            this.$message({
              type: 'warning',
              message: '请检查您的输入'
            })
          }
        })
      }
    },
    handleUploadSuccess(response, file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 移除之前的操作
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed() {
      this.$message.warning(`最多只能上传 ${this.$refs['upload'][0].limit} 个文件！`);
    },
    handleRefresh () {
      this.$forceUpdate()
      this.type = this.autoForms.type
    },
    handleSelectTypeChange (value) {
      this.type = value
    }
  }
}
</script>

<style scoped lang="scss">

</style>
